/* 
 *  菜单用户互动
 *  开发：Amron
 *  日期：12-30
 */
(function(){
    // 获取需要的元素
    var mainMenu = document.getElementById('mainMenu');
    var location = document.getElementById('location');
    var secondarys = document.getElementsByClassName('secondary');

    // 创建需要的变量
    // 记录所在列表的编号
    var number ;

    // 事件委托
    mainMenu.onmouseover = function(e){
        if(e.target.tagName.toLowerCase() == 'li'){
            number = e.target.dataset.n;
            // 根据源元素的data-n来显示二级菜单
            for(var i=0;i<secondarys.length;i++){
                if(secondarys[i].dataset.n == e.target.dataset.n)
                    secondarys[i].className += ' current';
                else secondarys[i].className = 'secondary';
            }
        }
        // 设置下边框样式
        document.querySelector('#mainMenu li[data-n="'+number+'"]').style.borderBottom = '1px solid transparent';
        if(document.querySelector('#mainMenu li[data-n="'+(number-1)+'"]'))
            document.querySelector('#mainMenu li[data-n="'+(number-1)+'"]').style.borderBottom = '1px solid transparent';
    }

    // 离开时将下边框显示出来
    mainMenu.onmouseout = function(e){
        if(e.target.tagName.toLowerCase() == 'li'){
            e.target.style.borderBottom = '1px solid rgba(255,255,255,0.2)';
            if(e.target.previousElementSibling)
                e.target.previousElementSibling.style.borderBottom = '1px solid rgba(255,255,255,0.2)';
        }
    }

    // 离开事件
    location.onmouseleave = function (){
        // 将二级菜单隐藏
        for(var i=0;i<secondarys.length;i++){
            secondarys[i].className = 'secondary';
        }
    }

})();